<template>
  <div class="van-popup" position="right">
    <van-nav-bar title="设置">
      <template #left>
        <van-icon class="upicon" name="arrow-left" @click="tui" />
      </template>
    </van-nav-bar>
    <div class="setup">
      <div class="setup-text">网络</div>
      <van-cell center title="使用3G/4G/5G网络播放">
        <template #right-icon>
          <van-switch v-model="bofang" size="24" />
        </template>
      </van-cell>
      <van-cell center title="使用3G/4G/5G网络下载">
        <template #right-icon>
          <van-switch v-model="xiazai" size="24" />
        </template>
      </van-cell>
      <van-cell center title="动态页在WiFi自动播放视频">
        <template #right-icon>
          <van-switch v-model="shipin" size="24" />
        </template>
      </van-cell>
    </div>
    <div class="setup">
      <div class="setup-text">播放和下载</div>
      <van-nav-bar>
        <template #left>
          在线播放音质
        </template>
        <template #right>
          自动
          <van-icon name="arrow" class="upicon" />
        </template>
      </van-nav-bar>
      <van-nav-bar>
        <template #left>
          下载音质
        </template>
        <template #right>
          极高
          <van-icon name="arrow" class="upicon" />
        </template>
      </van-nav-bar>
      <van-nav-bar>
        <template #left>
          清除缓存
        </template>
        <template #right>
          <van-icon name="arrow" class="upicon" />
        </template>
      </van-nav-bar>
    </div>
    <div class="setup">
      <div class="setup-text">账号和隐私</div>
      <van-nav-bar>
        <template #left>
          账号和绑定设置
        </template>
        <template #right>
          <van-icon name="arrow" class="upicon" />
        </template>
      </van-nav-bar>
      <van-nav-bar>
        <template #left>
          寻找并邀请好友
        </template>
        <template #right>
          <van-icon name="arrow" class="upicon" />
        </template>
      </van-nav-bar>
      <van-nav-bar>
        <template #left>
          消息和隐私设置
        </template>
        <template #right>
          <van-icon name="arrow" class="upicon" />
        </template>
      </van-nav-bar>
      <van-nav-bar>
        <template #left>
          登录保护
        </template>
        <template #right>
          <van-icon name="arrow" class="upicon" />
        </template>
      </van-nav-bar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      bofang: false,
      xiazai: false,
      shipin: false
    }
  },
  created () {},
  mounted () {},
  methods: {
    tui () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
.van-popup {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  /deep/ .upicon {
    font-size: 36px;
    color: #000;
  }
  .setup {
    background: #fff;
    .setup-text {
      padding: 24px 36px;
      font-size: 20px;
      color: #999;
      background: #f3f3f3;
    }
  }
}
</style>
